﻿@page "/ripple"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Ripple
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
     Apply the ripple effect to various UI elements.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase Material Design ripple effect animations applied to various elements (buttons, links, div elements) using the <code>rz-ripple</code> CSS class, with the ripple color inheriting from the element's text color.
</RadzenText>

<RadzenText Anchor="ripple#ripple-button" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Ripple RadzenButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Ripple effect applied to RadzenButton via <code>class="rz-ripple"</code>. Material theme buttons have the ripple effect applied by default.
</RadzenText>
<RadzenExample Example="RippleButton">
    <RippleButton />
</RadzenExample>

<RadzenText Anchor="ripple#ripple-link" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Ripple RadzenLink
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Ripple effect applied to RadzenLink via <code>class="rz-ripple"</code>.
</RadzenText>
<RadzenExample Example="RippleLink">
    <RippleLink />
</RadzenExample>

<RadzenText Anchor="ripple#ripple-div" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Ripple HTML div
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Ripple effect applied to a simple <code>&lt;div&gt;</code> element via <code>class="rz-ripple"</code>. The ripple color inherits the element's text color.
</RadzenText>
<RadzenExample Example="RippleDiv">
    <RippleDiv />
</RadzenExample>
